﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<title>安全监控大数据</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" type="text/css" href="css/cloud-admin.css" >
	<link rel="stylesheet" type="text/css"  href="css/themes/default.css" id="skin-switcher" >
	<link rel="stylesheet" type="text/css"  href="css/responsive.css" >
	<!-- STYLESHEETS --><!--[if lt IE 9]><script src="js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
	<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<!-- ANIMATE -->
	<link rel="stylesheet" type="text/css" href="css/animatecss/animate.min.css" />
	<!-- DATE RANGE PICKER -->
	<link rel="stylesheet" type="text/css" href="js/bootstrap-daterangepicker/daterangepicker-bs3.css" />
	<!-- TODO -->
	<link rel="stylesheet" type="text/css" href="js/jquery-todo/css/styles.css" />
	<!-- FULL CALENDAR -->
	<link rel="stylesheet" type="text/css" href="js/fullcalendar/fullcalendar.min.css" />
	<!-- GRITTER -->
	<link rel="stylesheet" type="text/css" href="js/gritter/css/jquery.gritter.css" />
	<!-- FONTS -->
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
	<!-- AmazeUI -->
	<link rel="stylesheet" href="../assets/css/amazeui.min.css"/>
	<link rel="stylesheet" href="../assets/css/admin.css">
	
	<style>
	 #allmap {width:100%;height: 300px;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<!--1.加载百度地图JS-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=F3643ae048b499a5992aa0db0106b235"></script>
	<!-- 加载百度地图样式信息窗口 -->
	<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />

</head>
<body>
	
	<!-- PAGE -->
	
	<section id="page">
		
		<div >
			<!-- SAMPLE BOX CONFIGURATION MODAL FORM-->
			<div class="modal fade" id="box-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
				  <div class="modal-content">
					<div class="modal-header">
					  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					  <h4 class="modal-title">Box Settings</h4>
					</div>
					<div class="modal-body">
					  Here goes box setting content.
					</div>
					<div class="modal-footer">
					  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					  <button type="button" class="btn btn-primary">Save changes</button>
					</div>
				  </div>
				</div>
			  </div>
			<!-- /SAMPLE BOX CONFIGURATION MODAL FORM-->
			<div class="container">
				<div class="row">
					<div id="content" class="col-lg-12">
						<!-- PAGE HEADER-->
						<div class="row">
							<div class="col-sm-12">
								
							</div>
						</div>
						<!-- /PAGE HEADER -->
						
						<div class="row">
							<div class="col-md-12">
								<div class="box border orange">
									<div class="box-title">
										<h4><i class="fa fa-bars"></i>地图分布</h4>
										<div class="tools">
											<a href="#box-config" data-toggle="modal" class="config">
												<i class="fa fa-cog"></i>
											</a>
											<a href="javascript:;" class="reload">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="javascript:;" class="collapse">
												<i class="fa fa-chevron-up"></i>
											</a>
											<a href="javascript:;" class="remove">
												<i class="fa fa-times"></i>
											</a>
										</div>
									</div>
									<div class="box-body">
										<div id="allmap"></div>
										<div id="result" class="am-btn-group">
											<button id="open" class="am-btn am-btn-primary am-round">危化品</button>
											<button id="open" class="am-btn am-btn-primary am-round">矿山</button>
											<button id="open" class="am-btn am-btn-primary am-round">粉尘</button>
											<button id="open" class="am-btn am-btn-primary am-round">智慧用电</button>
											<button id="close" class="am-btn am-btn-primary am-round">关闭</button>
										</div>
									</div>
								</div>
							</div>
						</div>

						<!-- DASHBOARD CONTENT -->
						<div class="row">
							<!-- COLUMN 1 -->
							<div class="col-md-6">
								<!-- 行业分布BOX -->
								<div class="box border inverse">
									<div class="box-title">
										<h4><i class="fa fa-adjust"></i>行业分布</h4>
										<div class="tools">
											<a href="#box-config" data-toggle="modal" class="config">
												<i class="fa fa-cog"></i>
											</a>
											<a href="javascript:;" class="reload">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="javascript:;" class="collapse">
												<i class="fa fa-chevron-up"></i>
											</a>
											<a href="javascript:;" class="remove">
												<i class="fa fa-times"></i>
											</a>
										</div>
									</div>
									<!-- DONUT PIE -->
									<div class="box-body">
										<div id="donut" class="chart"></div>
									</div>
									<!-- /DONUT PIE -->
								</div>
								<!-- /行业分布BOX -->
							</div>
							<!-- /COLUMN 1 -->
							
							<!-- COLUMN 2 -->
							<div class="col-md-6">
								<!-- 企业分布BOX -->
								<div class="box border green">
									<div class="box-title">
										<h4><i class="fa fa-bars"></i>区域分布</h4>
										<div class="tools">
											<a href="#box-config" data-toggle="modal" class="config">
												<i class="fa fa-cog"></i>
											</a>
											<a href="javascript:;" class="reload">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="javascript:;" class="collapse">
												<i class="fa fa-chevron-up"></i>
											</a>
											<a href="javascript:;" class="remove">
												<i class="fa fa-times"></i>
											</a>
										</div>
									</div>
									<div class="box-body">
										<div class="tabbable header-tabs">
											 <div class="tab-content">
												 <div class="tab-pane fade in active" id="box_tab1">
													<!-- TAB 1 -->
													<div id="chart-dash" class="chart" style="margin-top:29px;"></div>
												    <!-- /TAB 1 -->
												 </div>
											 </div>
										</div>
									</div>
								</div>
								<!-- /企业分布BOX -->
							</div>
							<!-- /COLUMN 2 -->

							<!-- 
							<div class="col-md-6">
								<div class="row">
									<div class="col-md-12">
										<div class="quick-pie panel panel-default">
											<div class="panel-body">
												<div class="col-md-4 text-center">
													<div id="dash_pie_1" class="piechart" data-percent="39">
														<span class="percent"></span>
													</div>
													<a href="#" class="title">危化企业 <i class="fa fa-angle-right"></i></a>
												</div>
												<div class="col-md-4 text-center">
													<div id="dash_pie_2" class="piechart" data-percent="13">
														<span class="percent"></span>
													</div>
													<a href="#" class="title">矿山企业 <i class="fa fa-angle-right"></i></a>
												</div>
												<div class="col-md-4 text-center">
													<div id="dash_pie_3" class="piechart" data-percent="26">
														<span class="percent"></span>
													</div>
													<a href="#" class="title">粉尘企业 <i class="fa fa-angle-right"></i></a>
												</div>
												<div class="col-md-4 text-center">
													<div id="dash_pie_4" class="piechart" data-percent="22">
														<span class="percent"></span>
													</div>
													<a href="#" class="title">智慧用电 <i class="fa fa-angle-right"></i></a>
												</div>
												<div class="col-md-4 text-center">
													<div id="dash_pie_3" class="piechart" data-percent="90">
														<span class="percent"></span>
													</div>
													<a href="#" class="title">待建 <i class="fa fa-angle-right"></i></a>
												</div>
												<div class="col-md-4 text-center">
													<div id="dash_pie_3" class="piechart" data-percent="90">
														<span class="percent"></span>
													</div>
													<a href="#" class="title">待建 <i class="fa fa-angle-right"></i></a>
												</div>
											</div>
										</div>
									</div>
							   </div>
							</div>
							-->
							<!-- /COLUMN 1 -->
							
							
						</div>
					   <!-- /DASHBOARD CONTENT -->
					   
					   <!-- ROW 2 -->
						<div class="row">
							<!-- COLUMN 2-1 -->
							<div class="col-md-6">
								<div class="box solid grey">
									<div class="box-title">
										<h4><i class="fa fa-bar-chart-o"></i>风险指数</h4>
										<div class="tools">
											<span class="label label-danger">
												20% <i class="fa fa-arrow-up"></i>
											</span>
											<a href="#box-config" data-toggle="modal" class="config">
												<i class="fa fa-cog"></i>
											</a>
											<a href="javascript:;" class="reload">
												<i class="fa fa-refresh"></i>
											</a>
											<a href="javascript:;" class="collapse">
												<i class="fa fa-chevron-up"></i>
											</a>
											<a href="javascript:;" class="remove">
												<i class="fa fa-times"></i>
											</a>
										</div>
									</div>
									<!--风险指数 -->
									<div class="box-body">
										<div id="chart-revenue" style="height:240px"></div>
									</div>
									<!--/风险指数 -->
								</div>
							</div>
							<!-- /COLUMN 2-1 -->

							<!-- COLUMN 2-2 -->
							<div class="col-md-6">
								<div class="panel panel-default">
									<div class="panel-body" style="padding-bottom:7px;">
										<table class="table table-striped table-bordered table-hover" style="margin-bottom:5px;">
											 <thead>
												<tr>
												   <th><i class="fa fa-user"></i> 企业名称</th>
												   <th class="hidden-xs"><i class="fa fa-quote-left"></i> 报警参数</th>
												   <th><i class="fa fa-bars"></i> 状态</th>
												</tr>
											 </thead>
											 <tbody>
												<tr>
												   <td><a href="#">杭州协和液化气体有限公司</a></td>
												   <td class="hidden-xs">
														<span class="label label-success label-sm">氧化器液位</span>
														<span class="label label-danger label-info"><i class="fa fa-toggle-up">8.5m</i></span>	
												   </td>
												   <td><span class="label label-warning label-sm">待处理</span></td>
												</tr>
												<tr>
												   <td><a href="#">余姚市舜江试剂厂</a></td>
												   <td class="hidden-xs">
														<span class="label label-success label-sm">甲醇储罐1液位</span>
														<span class="label label-danger label-info"><i class="fa fa-toggle-up">9.3m</i></span>	
												   </td>
												   <td><span class="label label-success label-sm">已处理</span></td>
												</tr>
												<tr>
												   <td><a href="#">宁波三菱化学有限公司</a></td>
												   <td class="hidden-xs">
														<span class="label label-success label-sm">反应釜温度</span>
														<span class="label label-danger label-info"><i class="fa fa-toggle-up">86.8℃</i></span>	
												   </td>
												   <td><span class="label label-warning label-sm">待处理</span></td>
												</tr>
												<tr>
												   <td><a href="#">杭州协和液化气体有限公司</a></td>
												   <td class="hidden-xs">
														<span class="label label-success label-sm">反应釜3温度</span>
														<span class="label label-danger label-info"><i class="fa fa-toggle-up">97.8℃</i></span>	
												   </td>
												   <td><span class="label label-danger label-sm">紧急</span></td>
												</tr>
												<tr>
												   <td><a href="#">	温州金来聚氨酯有限公司</a></td>
												   <td class="hidden-xs">
														<span class="label label-success label-sm">氧化器液位</span>
														<span class="label label-danger label-info"><i class="fa fa-toggle-up">8.5m</i></span>	
												   </td>
												   <td><span class="label label-success label-sm">待处理</span></td>
												</tr>
											 </tbody>
										</table>
									</div>
									<!--导航条-->
									<div class="text-center">
										<ul class="pagination pagination-sm" style="margin:0;padding:0;">
										  <li><a href="#">&laquo;</a></li>
										  <li class="active"><a href="#">1</a></li>
										  <li><a href="#">2</a></li>
										  <li><a href="#">3</a></li>
										  <li><a href="#">4</a></li>
										  <li><a href="#">5</a></li>
										  <li><a href="#">&raquo;</a></li>
										</ul>
									<div>
									<!--/导航条-->
								</div>
							</div>
							<!-- /COLUMN 2-2 -->
						</div>
						<!-- /ROW 2 -->
	
						<div class="footer-tools">
							<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
						</div>
					</div><!-- /CONTENT-->
				</div>
			</div>
		</div>
	</section>
	<!--/PAGE -->
	<!-- JAVASCRIPTS -->
	<!-- Placed at the end of the document so the pages load faster -->
	<!-- JQUERY -->
	<script src="js/jquery/jquery-2.0.3.min.js"></script>
	<!-- JQUERY UI-->
	<script src="js/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
	<!-- BOOTSTRAP -->
	<script src="bootstrap-dist/js/bootstrap.min.js"></script>
	
		
	<!-- DATE RANGE PICKER -->
	<script src="js/bootstrap-daterangepicker/moment.min.js"></script>
	
	<script src="js/bootstrap-daterangepicker/daterangepicker.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script>
	<!-- SLIMSCROLL -->
	<script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.min.js"></script><script type="text/javascript" src="js/jQuery-slimScroll-1.3.0/slimScrollHorizontal.min.js"></script>
	<!-- BLOCK UI -->
	<script type="text/javascript" src="js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
	<!-- SPARKLINES -->
	<script type="text/javascript" src="js/sparklines/jquery.sparkline.min.js"></script>
	<!-- EASY PIE CHART -->
	<script src="js/jquery-easing/jquery.easing.min.js"></script>
	<script type="text/javascript" src="js/easypiechart/jquery.easypiechart.min.js"></script>
	<!-- FLOT CHARTS -->
	<script src="js/flot/jquery.flot.min.js"></script>
	<script src="js/flot/jquery.flot.time.min.js"></script>
    <script src="js/flot/jquery.flot.selection.min.js"></script>
	<script src="js/flot/jquery.flot.resize.min.js"></script>
    <script src="js/flot/jquery.flot.pie.min.js"></script>
    <script src="js/flot/jquery.flot.stack.min.js"></script>
    <script src="js/flot/jquery.flot.crosshair.min.js"></script>
	<!-- TODO -->
	<script type="text/javascript" src="js/jquery-todo/js/paddystodolist.js"></script>
	<!-- TIMEAGO -->
	<script type="text/javascript" src="js/timeago/jquery.timeago.min.js"></script>
	<!-- FULL CALENDAR -->
	<script type="text/javascript" src="js/fullcalendar/fullcalendar.min.js"></script>
	<!-- COOKIE -->
	<script type="text/javascript" src="js/jQuery-Cookie/jquery.cookie.min.js"></script>
	<!-- GRITTER -->
	<script type="text/javascript" src="js/gritter/js/jquery.gritter.min.js"></script>
	<!-- CUSTOM SCRIPT -->
	<script src="js/lee-script.js"></script>
	<script src="js/lee-charts.js"></script>
	<script>
		jQuery(document).ready(function() {		
			App.setPage("index");  //Set current page
			App.init(); //Initialise plugins and elements
			Charts.initCharts();
			Charts.initPieCharts();
		});
		
		


	</script>

	<!--百度地图API功能-->
	<script>
		var map = new BMap.Map("allmap",{enableMapClick:false});    // 创建Map实例
		map.centerAndZoom("杭州", 11);  // 初始化地图,设置中心点坐标和地图级别
		
		map.setCurrentCity("杭州");          // 设置地图显示的城市 此项是必须设置的
		map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

		var size = new BMap.Size(10, 20);
		map.addControl(new BMap.NavigationControl());//添加导航条
		map.addControl(new BMap.MapTypeControl());   //添加地图类型(卫星/三维)控件
		map.addControl(//
			new BMap.CityListControl({
			anchor: BMAP_ANCHOR_TOP_LEFT,
			offset: size,
			// 切换城市之间事件
			// onChangeBefore: function(){
			//    alert('before');
			// },
			// 切换城市之后事件
			// onChangeAfter:function(){
			//   alert('after');
			// }
			})
		);

		//加载自定义图层
		var customLayer;
		function addCustomLayer(keyword) {
			if (customLayer) {
				map.removeTileLayer(customLayer);
			}
			customLayer=new BMap.CustomLayer({
				geotableId: 48047,
				q: '', //检索关键字
				tags: '', //空格分隔的多字符串
				filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
			});
			map.addTileLayer(customLayer);
			customLayer.addEventListener('hotspotclick',callback);//添加热点点击事件,调用callback()函数
		}

		//单击热点图层
		function callback(e){
			var customPoi = e.customPoi;//poi的默认字段
			var contentPoi=e.content;//poi的自定义字段
			var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '<br/>危化品:'+contentPoi.chemicals+'</p>';
			var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
				title: customPoi.title, //标题
				width: 290, //宽度
				height: 40, //高度
				panel : "panel", //检索结果面板
				enableAutoPan : true, //自动平移
				enableSendToPhone: true, //是否显示发送到手机按钮
				searchTypes :[
					BMAPLIB_TAB_SEARCH,   //周边检索
					BMAPLIB_TAB_TO_HERE,  //到这里去
					BMAPLIB_TAB_FROM_HERE //从这里出发
				]
			});
			var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
			searchInfoWindow.open(point);
		}

		//关联按钮点击事件
		document.getElementById("open").onclick = function(){
			addCustomLayer();
		};
		document.getElementById("open").click();
		document.getElementById("close").onclick = function(){
			if (customLayer) {
				map.removeTileLayer(customLayer);
			}
		};

	</script>
	<!-- /JAVASCRIPTS -->
</body>
</html>